<html>
<head>
    <title>jQuery Txt Demo</title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet">
    <style>
#top {
    font-size: 1.2em;
}
#leftpair {
    width: 62%;
}
#middle {
    float: right;
    margin: 0px;
}
#right {
    float: right;
}
#bottom {
    text-align: center;
}
.txt-properties {
    display: none;
}
.box {
    margin: 0px 5px;
    padding: 5px;
    border: 1px dotted black;
}
.main {
    height: 14em;
    width: 14em;
}
    </style>
    <script type="text/javascript" src="../../jquery.1.3.2.js"></script>
    <script type="text/javascript" src="jquery.txt.js"></script>
    <script type="text/javascript" src="../log/log.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
    <script type="text/javascript">
$(function() {
    $.txt.load();
    // load from json next
    $.getJSON('txt.json', function(data) {
        log('Loaded json:',data);
        $.txt.putAll(data);
    });

    $('.add').click(function() {
        var key = $('#right input[name=key]').val(),
            msg = $('#right textarea').val();
        log('Add:',key,'=',msg);
        $.txt.put(key, msg);
        return false;
    });
    $('#left input[name=ui]').click(function() {
        $.txt.ask.options.native = !this.checked;
    });
    $('.use').click(function() {
        var key = $('#left input[name=key]').val(),
            arg1 = $('#left input[name=arg1]').val(),
            arg2 = $('#left input[name=arg2]').val();
        log('Get:',key,arg1,arg2);
        $('#middle').txt(key, arg1, arg2);
        return false;
    });
    $('.say').click(function() {
        var key = $('#left input[name=key]').val(),
            arg1 = $('#left input[name=arg1]').val(),
            arg2 = $('#left input[name=arg2]').val(),
            ui = $('#left input[name=ui]').attr('checked'),
            msg = $.txt.say(key, arg1, arg2, { native: !ui });
        log('Showed:',msg,'for',key,arg1,arg2);
        return false;
    });
    $('.ask').click(function() {
        var key = $('#left input[name=key]').val(),
            arg1 = $('#left input[name=arg1]').val(),
            arg2 = $('#left input[name=arg2]').val(),
            msg = $.txt.ask(key, arg1, arg2, function(msg) {
                $('#middle').html($.txt("You said 'OK' to '{0}'.", msg));
            });
        log('Asked:',msg,'for',key,arg1,arg2);
        return false;
    });
    $('.showall').click(function() {
        var txt = '';
        $.each($.txt.repository, function(key,val) {
            txt += key + ' = ' + val + '<br>';
        });
        $('#middle').html(txt);
    });
});
    </script>
</head>
<body>
<div id="top" class="box">
    To display messages, use the box on the left.<br>
    To add a new message, use the box on the right.<br>
    View the source code to see how it all works.
</div>
<br clear="all">
<div id="right" class="box main">
    <label for="key">Txt Key:</label>
    <input type="text" name="key" value="scrooge"><br>
    <label for="text">Txt Message:</label>
    <textarea name="text">Bah, Humbug!</textarea><br>
    <button class="add">Add Txt</button>
    <button class="showall">Show Stored Txt Keys</button>
</div>
<div id="leftpair">
<div id="middle" class="box main">
I suggest clicking 'Show Stored Txt Keys' first,
to see what's already in the repository for this demo.
</div>
<div id="left" class="box main">
    <label for="key">Txt or Key:</label>
    <input type="text" name="key" value="foo.bar"><br>
    <label for="arg1">Argument 0:</label>
    <input type="text" name="arg1" value="dance">
    <label for="arg2">Argument 1:</label>
    <input type="text" name="arg2" value="want"><br>
    <label for="ui">Use jQuery UI?</label>
    <input type="checkbox" name="ui" checked="true"><br>
    <button class="use">Use</button>
    <button class="say">Alert</button>
    <button class="ask">Confirm</button>
</div>
</div>
<br clear="all">
<div id="bottom">
</div>
<div class="txt-properties">
    greeting = Hello, World!
    farewell = Goodbye, {0} World.
    foo.bar = I can {0} if i {1} to!
</div>
</body>
</html>